<template>
  <!-- 头部 -->
  <div class="header">
    下单时间：
    <el-date-picker v-model="value1"
                    type="daterange"
                    range-separator="到"
                    start-placeholder="Start date"
                    end-placeholder="End date" />
    <!-- 区域选择框 -->
    区域：<el-select v-model="value"
               filterable
               placeholder="全部">
      <el-option v-for="item in options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value" />
    </el-select>
    <!-- 类型选择框 -->
    类型：<el-select v-model="value2"
               filterable
               placeholder="全部">
      <el-option v-for="item in state"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value" />
    </el-select>
    <!-- 使用情况选择框 -->
    使用情况：<el-select v-model="value2"
               filterable
               placeholder="全部">
      <el-option v-for="item in state"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value" />
    </el-select>
    兑换码：<input type="text">
    平台：<input type="text">
    <el-button type="info">查询</el-button>
  </div>
  <!-- 表格 -->
  <div class="content">
    <el-table :data="tableData"
              border
              style="width: 100%">
      <el-table-column prop="date"
                       label="下单时间"
                       width="180" />
      <el-table-column prop="name"
                       label="区域"
                       width="180" />
      <el-table-column prop="name"
                       label="预约时间"
                       width="180" />
      <el-table-column prop="name"
                       label="订单金额"
                       width="100" />
      <el-table-column prop="address"
                       label="卡劵折扣"
                       width="100" />
      <el-table-column prop="address"
                       label="实际支付"
                       width="100" />
      <el-table-column prop="address"
                       label="订单状态"
                       width="100" />
      <el-table-column prop="address"
                       label="订单号"
                       width="180" />
      <el-table-column prop="name"
                       label="手机号"
                       width="180" />
      <el-table-column prop="name"
                       label="操作"
                       width="180" />
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="footer">
    <el-pagination background
                   v-model:currentPage="currentPage4"
                   v-model:page-size="pageSize4"
                   :page-sizes="[100, 200, 300, 400]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="400"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// 下单时间
const value1 = ref("");
// 区域
const value = ref("");
// 订单状态
const value2 = ref("");
// 输入框
const input = ref("");
// 区域选择框
const options = [
  {
    value: "Option1",
    label: "全部",
  },
  {
    value: "Option2",
    label: "单人明区",
  },
  {
    value: "Option3",
    label: "单人暗区",
  },
  {
    value: "Option4",
    label: "双人区(靠窗）",
  },
  {
    value: "Option5",
    label: "双人区(室内）",
  },
];
// 类型选择框
const state = [
  {
    value: "Option1",
    label: "全部",
  },
  {
    value: "Option2",
    label: "一小时",
  },
  {
    value: "Option3",
    label: "三小时",
  },
  {
    value: "Option4",
    label: "日卡",
  },
  {
    value: "Option6",
    label: "月卡",
  },
];
// 使用情况选择框
const employ = [
  {
    value: "Option1",
    label: "全部",
  },
  {
    value: "Option2",
    label: "已兑换",
  },
  {
    value: "Option3",
    label: "未兑换",
  },
  {
    value: "Option4",
    label: "过期",
  },
];

// 表格
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
// 分页
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>

<style scoped>
.cont {
  padding: 10px;
}
.cont > text {
  font-size: x-large;
}
.cont >>> .el-button--primary {
  float: right;
}
.header {
  width: 100%;
  height: 50px;
  background-color: #ccc;
  margin: 0 auto;
}
.header >>> .el-range-editor.el-input__wrapper {
  width: 200px;
}
input {
  width: 100px;
}
.el-pagination {
  margin: 0 auto;
  width: 500px;
}
</style>